<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link href="/static/css/app.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <span class="navbar-brand">企业云资源申请系统</span>
            <div class="navbar-nav ms-auto">
                <span class="nav-link">欢迎, {{.user.Username}} (开发人员)</span>
                <a class="nav-link" href="/logout">退出</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">功能菜单</h6>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action active" data-tab="apply">
                            申请资源
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-tab="history">
                            申请历史
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-tab="profile">
                            个人信息
                        </a>
                    </div>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9">
                <!-- 申请资源 -->
                <div id="apply-tab" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">申请云资源</h5>
                        </div>
                        <div class="card-body">
                            <form id="applicationForm">
                                <div class="mb-3">
                                    <label for="resourceType" class="form-label">资源类型</label>
                                    <select class="form-select" id="resourceType" name="resource_type" required>
                                        <option value="">请选择资源类型</option>
                                        {{range .available_resources}}
                                        <option value="{{.}}">{{.}}</option>
                                        {{end}}
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="description" class="form-label">申请理由</label>
                                    <textarea class="form-control" id="description" name="description" rows="4" 
                                              placeholder="请详细描述申请资源的用途和需求..." required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">提交申请</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 申请历史 -->
                <div id="history-tab" class="tab-content d-none">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">我的申请历史</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>申请ID</th>
                                            <th>资源类型</th>
                                            <th>申请时间</th>
                                            <th>状态</th>
                                            <th>审批人</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{range .my_applications}}
                                        <tr>
                                            <td>{{.ID}}</td>
                                            <td>{{.ResourceType}}</td>
                                            <td>{{.CreatedAt}}</td>
                                            <td>
                                                {{if eq .Status "pending"}}
                                                <span class="badge bg-warning">待审批</span>
                                                {{else if eq .Status "approved"}}
                                                <span class="badge bg-success">已批准</span>
                                                {{else}}
                                                <span class="badge bg-danger">已拒绝</span>
                                                {{end}}
                                            </td>
                                            <td>{{.ApprovedBy}}</td>
                                        </tr>
                                        {{else}}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">暂无申请记录</td>
                                        </tr>
                                        {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 个人信息 -->
                <div id="profile-tab" class="tab-content d-none">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">个人信息</h5>
                        </div>
                        <div class="card-body">
                            <dl class="row">
                                <dt class="col-sm-3">用户名:</dt>
                                <dd class="col-sm-9">{{.user.Username}}</dd>
                                
                                <dt class="col-sm-3">所属项目:</dt>
                                <dd class="col-sm-9">{{.user.ProjectName}}</dd>
                                
                                <dt class="col-sm-3">域:</dt>
                                <dd class="col-sm-9">{{.user.DomainName}}</dd>
                                
                                <dt class="col-sm-3">角色权限:</dt>
                                <dd class="col-sm-9">
                                    {{range .user.Roles}}
                                    <span class="badge bg-secondary me-1">{{.}}</span>
                                    {{end}}
                                </dd>
                            </dl>
                            
                            <div class="alert alert-info">
                                <h6>权限说明:</h6>
                                <ul class="mb-0">
                                    <li><strong>开发人员</strong>: 可以申请云资源，查看申请历史</li>
                                    <li>申请需要团队负责人或项目经理审批</li>
                                    <li>审批通过后，将获得相应的OpenStack资源访问权限</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('[data-tab]').forEach(function(tab) {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新活动标签
                document.querySelectorAll('.list-group-item-action').forEach(function(item) {
                    item.classList.remove('active');
                });
                this.classList.add('active');
                
                // 切换内容
                document.querySelectorAll('.tab-content').forEach(function(content) {
                    content.classList.add('d-none');
                });
                document.getElementById(this.dataset.tab + '-tab').classList.remove('d-none');
            });
        });

        // 申请表单提交
        document.getElementById('applicationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            
            fetch('/dashboard/apply', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('申请失败: ' + data.error);
                } else {
                    alert('申请提交成功！申请ID: ' + data.application_id);
                    this.reset();
                    location.reload(); // 刷新页面显示新申请
                }
            })
            .catch(error => {
                alert('提交失败: ' + error.message);
            });
        });
    </script>
</body>
</html>